<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="1400px"
    :modal="false"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-row :gutter="24">
      <el-col :span="5">
        <el-card header="表单分类">
          <treeDic v-model="queryParam.FormClassify" :dic-id="DictItemDic.formClassify" :parent-id="prtFormClassify" @load="loadClassify" @change="formTypeLoad" />
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card :header="subTitle">
          <el-form :inline="true" :model="queryParam">
            <el-form-item label="关键字">
              <el-input
                v-model="queryParam.QueryKey"
                placeholder="表单名"
                style="width: 200px"
                @change="loadGrid"
              />
            </el-form-item>
          </el-form>
          <w-table
            :data="formList"
            :columns="columns"
            :is-paging="true"
            :is-select="true"
            :is-multiple="false"
            :select-keys="chioseKey"
            :paging="paging"
            row-key="Id"
            @selected="selected"
            @load="loadGrid"
          >
            <template slot="formType" slot-scope="e">
              <span v-if="e.row.FormType == 0">自定义表单</span>
              <span v-else-if="e.row.FormType == 1">代理表单</span>
              <span v-else-if="e.row.FormType == 2">物理表</span>
              <span v-else-if="e.row.FormType == 3">视图</span>
            </template>
            <template slot="formClassify" slot-scope="e">
              <span v-if="formClassifyDic[e.row.FormClassify]"> {{ formClassifyDic[e.row.FormClassify].text }}</span>
            </template>
            <template slot="action" slot-scope="e">
              <el-button v-if="e.row.FormType == 0" size="mini" type="primary" icon="el-icon-view" @click="show(e.row)">预览</el-button>
            </template>
          </w-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row slot="footer" style="text-align: center; margin-top: 20px">
      <el-button @click="resetChiose">重 置</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </el-row>
    <formPreviewModel :form-id="id" :visible.sync="preVisible" />
  </el-dialog>
</template>

<script>
import * as formApi from '@/customForm/api/form'
import {
  DictItemDic
} from '@/customForm/config/formConfig'
import treeDic from '@/components/base/treeDic.vue'
import formPreviewModel from '../preview/formPreviewModel.vue'
import store from '@/store'
export default {
  components: {
    formPreviewModel,
    treeDic
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '选择表单'
    },
    formClassify: {
      type: String,
      default: null
    },
    formType: {
      type: Array,
      default: null
    },
    companyId: {
      type: String,
      default: () => {
        return store.getters.curComId
      }
    },
    prtFormClassify: {
      type: String,
      default: null
    },
    isAllowNull: {
      type: Boolean,
      default: false
    },
    formId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      minHeight: '500px',
      preVisible: false,
      subTitle: null,
      id: null,
      formList: [],
      formClassifyDic: {},
      columns: [
        {
          key: 'FormName',
          title: '表单标题',
          align: 'left',
          minWidth: 200
        },
        {
          key: 'FormShow',
          title: '表单使用说明',
          align: 'right',
          minWidth: 150
        },
        {
          key: 'FormClassify',
          title: '表单分类',
          align: 'center',
          slotName: 'formClassify',
          width: 120
        },
        {
          key: 'FormType',
          title: '表单类型',
          align: 'center',
          slotName: 'formType',
          width: 120
        },
        {
          key: 'Ver',
          title: '版本号',
          align: 'center',
          width: 125,
          sortable: 'custom'
        },
        {
          key: 'Action',
          title: '操作',
          align: 'left',
          width: '180px',
          slotName: 'action'
        }
      ],
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'Id',
        IsDesc: false,
        Total: 0
      },
      queryParam: {
        FormType: null,
        FormClassify: null,
        Status: [1],
        QueryKey: null
      },
      chioseKey: null,
      cache: {},
      isload: false
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    show(row) {
      this.id = row.Id
      this.preVisible = true
    },
    selected(e) {
      this.isload = true
      this.chioseKey = e.keys
      this.isload = false
    },
    loadClassify(e) {
      this.formClassifyDic = e.tree
    },
    resetChiose() {
      this.queryParam.QueryKey = null
      if (this.prtFormClassify != null && this.formClassify == null) {
        this.queryParam.FormClassify = this.prtFormClassify
      }
      if (this.formType != null && this.formType.length > 0) {
        this.queryParam.FormType = this.formType
      }
      if (this.formId != null) {
        this.chioseKey = [this.formId]
      } else {
        this.chioseKey = []
      }
      this.loadGrid()
    },
    reset() {
      this.cache = {}
      this.minHeight = window.innerHeight * 0.6 + 'px'
      if (this.formType != null) {
        this.queryParam.FormType = this.formType
      } else {
        this.queryParam.FormType = null
      }
      if (this.formClassify != null) {
        this.queryParam.FormClassify = this.formClassify
      } else {
        this.queryParam.FormClassify = null
      }
      this.queryParam.CompanyId = this.companyId
      this.resetChiose()
    },
    save() {
      if (this.isAllowNull === false && this.chioseKey.length === 0) {
        this.$message({
          message: '请选择表单!',
          type: 'warning'
        })
        return
      }
      this.$emit('update:visible', false)
      if (this.chioseKey.length === 0) {
        this.$emit('update:formId', null)
        this.$emit('save', {
          comId: this.companyId,
          formId: null,
          form: null
        })
      } else {
        const key = this.chioseKey[0]
        this.$emit('save', {
          comId: this.companyId,
          formId: key,
          form: this.cache[key]
        })
      }
    },
    async formTypeLoad(e) {
      if (e.value != null && e.value.length > 0) {
        this.queryParam.FormClassify = e.value[0]
        this.subTitle = e.tree[this.queryParam.FormClassify].text + '类表单列表'
      } else {
        this.queryParam.FormClassify = null
        this.subTitle = '全部表单'
      }
      this.loadGrid()
    },
    async loadGrid() {
      const data = await formApi.Query(this.queryParam, this.paging)
      this.paging.Total = data.Count
      this.formList = data.List
      data.List.forEach(c => {
        this.cache[c.Id] = c
      })
    },
    closeForm() {
      this.$emit('update:visible', false)
      this.$emit('close')
    }
  }
}
</script>
<style type="less" scoped>
.searchLine .el-form-item{
 margin-right: 10px;
}
</style>
